<template>
	<div class="steps">
		<div v-for="(step, index) in steps" :key="index" :class="{ 'steps-item': true, flex1: index !== 0 }">
			<!-- 前杠 -->
			<div :class="{ 'steps-item-bar': true, 'activate-bar': current >= index }" v-if="index !== 0"></div>

			<div
				@click="jump(index, step)"
				:class="{ 'steps-item-circle': true, 'activate-circle': current >= index, 'steps-item-circle-nav': current >= index }"
				:data-name="step.name"
			>
				<div v-if="current > index"><uni-icons type="checkmarkempty" color="#ffffff" size="16"></uni-icons></div>
				<div v-else>{{ step.showText || index + 1 }}</div>
			</div>
			<!-- 步骤名 -->
			<!-- <div class="steps-item-name">{{ step.name }}</div> -->
		</div>
	</div>
</template>

<script>
export default {
	name: 'StepBar',
	// model: {
	// 	prop: 'current',
	// 	event: 'input'
	// },
	props: {
		current: {
			type: Number,
			default: 0
		},
		steps: {
			type: Array,
			default: () => {
				return [
					// {
					// 	name: '人脸识别',
					// 	showText: '',
					// 	disable: true
					// },
					{
						name: '电子签名',
						showText: '',
						disable: true
					},
					{
						name: '确认电子协议',
						showText: '',
						disable: true
					}
				];
			}
		}
	},
	data() {
		return {};
	},
	methods: {
		jump(i, step) {
			if (!step.disable && i <= this.current) {
				this.$emit('update:current', i);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.flex1 {
	flex: 1;
}
.steps {
	display: flex;
	justify-content: space-between;
	padding: 20rpx 100rpx;
	width: auto;
	height: 100rpx;
	&-item {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		&-bar {
			flex: 1;
			border-bottom: 4rpx solid #cccccc;
			margin: 0 20rpx;
		}
		&-circle {
			width: 52rpx;
			height: 52rpx;
			background: #cccccc;
			border-radius: 50%;
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 32rpx;
			font-weight: 400;
			color: #ffffff;
		}
		&-circle::after {
			content: attr(data-name);
			white-space: nowrap;
			margin-top: 20rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
		}
		&-circle-nav {
		}
		&-circle-nav::after {
			content: attr(data-name);
			white-space: nowrap;
			margin-top: 20rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #0073ff;
		}
	}
}
.activate-bar {
	border-color: #0073ff;
}
.activate-circle {
	background: #0073ff;
}
</style>
